<template>
  <div id="reg">
    <el-card>

      <h2 style="margin: 30px 0px 40px 0px;">注册账号</h2>

      <el-form ref="formLabelAlign" :label-position="labelPosition" label-width="50px" :model="formLabelAlign"
        v-model="labelPosition">
        <el-form-item label="账号 *">
          <el-input v-model="formLabelAlign.account" placeholder="请输入您的账号" maxlength="16" clearable="true"></el-input>
        </el-form-item>
        <el-form-item label="密码 *">
          <el-input placeholder="请输入您的密码" v-model="formLabelAlign.password" maxlength="16" show-password></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input placeholder="请输入您的姓名" v-model="formLabelAlign.fullname" maxlength="10" clearable="true"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="formLabelAlign.sex" placeholder="请选择" style="width: 330px;">
            <el-option value="男">男</el-option>
            <el-option value="女">女</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱 *">
          <el-input placeholder="请输入您的邮箱地址" v-model="formLabelAlign.email" maxlength="20" clearable="true"></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker v-model="formLabelAlign.birthday" type="date" placeholder="选择日期" style="width: 330px;"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="地址">
          <el-input placeholder="请输入您的地址" v-model="formLabelAlign.address" clearable="true"></el-input>
        </el-form-item>

        <el-button @click="reg" :plain="true">立即注册</el-button>

        <el-tag size="mini">
          <router-link to="/login" class="custom-link">前往登录</router-link>
        </el-tag>

      </el-form>


    </el-card>
  </div>
</template>

<script>
export default {
  name: 'reg',
  data() {
    return {
      labelPosition: 'left',
      formLabelAlign: {
        account: '',
        password: '',
        fullname: '',
        sex: '',
        email: '',
        birthday: '',
        address: '',
        wallet: 0,
      },
    }
  },
  methods: {
    //验证邮箱格式
    validateEmail(email) {
      var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      return pattern.test(email);
    },

    //验证密码格式
    validatePassword(password) {
      var pattern = /^(?=.*[0-9])(?=.*[a-zA-Z])[a-zA-Z0-9]{8,16}$/;
      return pattern.test(password);
    },

    reg() {

      //验证不能为空
      if (!this.formLabelAlign.account || !this.formLabelAlign.password || !this.formLabelAlign.email) {
        this.$message.error('账号、密码、邮箱为必填项！');
        return;
      }

      if (!this.validatePassword(this.formLabelAlign.password)) {
        this.$message.error('请输入8-16位数字加字母组成的密码！');
        return;
      }

      if (!this.validateEmail(this.formLabelAlign.email)) {
        this.$message.error('请输入正确的邮箱格式！');
        return;
      }

      // 表单验证 提交数据
      this.$refs.formLabelAlign.validate((valid) => {
        if (valid) {
          // 验证通过，发送注册请求
          this.$axios.post('http://localhost:3000/users', {
            account: this.formLabelAlign.account,
            password: this.formLabelAlign.password,
            fullname: this.formLabelAlign.fullname,
            sex: this.formLabelAlign.sex,
            email: this.formLabelAlign.email,
            birthday: this.formLabelAlign.birthday,
            address: this.formLabelAlign.address,
            wallet: this.formLabelAlign.wallet,
          })
            .then((res) => {
              const { status } = res;
              if (status === 201) {
                // 注册成功处理逻辑
                console.log('注册成功');
                // 清空表单数据
                this.formLabelAlign = {
                  account: '',
                  password: '',
                  fullname: '',
                  sex: '',
                  email: '',
                  birthday: '',
                  address: '',
                };
                this.$message({
                  message: '注册成功！',
                  type: 'success'
                });
              }
            })
            .catch((error) => {
              // 注册失败处理逻辑
              this.$message({
                message: '注册失败！',
                type: 'error'
              });
            });
        } else {

          //表单验证不通过
        }

      });
    },



  }
}
</script>


<style scoped>
* {
  font-weight: bold;
}

.custom-link {
  color: #409EFF;
  text-decoration: none;
}


#reg {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

  background: linear-gradient(to right, #f2709c, #79CBCA, #E684AE);
  background-size: 200% auto;
  animation: gradientAnimation 10s ease infinite;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.el-card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 700px;
  border-radius: 20px;
  width: 550px;
}

form {
  width: 380px;
}

button {
  width: 100px;
  margin: 10px 0px 30px 0px;
}

.el-tag {
  margin-left: 320px;
  margin-bottom: 30px;
}
</style>
